<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import Board from '@/canvas/board.js'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus'
import { TypeSet } from '@/utils/mathjax'

const board = ref(null)
const container = ref(null)
const image_base64=ref('')
const latexText = ref('')
const latexVisible = ref('')
const imageVisible = ref('')
const latexRender = computed(() => {
    return '$' + latexText.value + '$';
  })

onMounted(() => {
  // 新建一个画板
  board.value = new Board(container.value)
  TypeSet()
})
watch(()=> latexRender.value,
  (newValue)=>{
    //直接调用TypeSet()也可以，但是会重新渲染页面所有公式
    TypeSet()
  })
// 清空画板
const clearBoard = ()=>{
  console.log('开始清空画板啦')
  const canvas = document.getElementById('container')
  board.value.ctx.clearRect(0, 0, 800, 300)
  latexText.value = ''
}
// 提交后台获取latex公式
const postAlibabaOCR=()=>{
  image_base64.value = board.value.ctx.canvas.toDataURL('image/png')
  let params ={
    base64_str: image_base64.value  
  }
    axios.post(`/questions/formula_ocr_alibaba/`, params).then((res) => {
    if(res.code==200){
      ElMessage.success( '提交成功')
      console.log('res:', res.data.results)
      latexText.value = res.data.results
      latexVisible.value = true
    }else
    if(res.code==1099){
      ElMessage.warning( '标题不能为空！')
    }else{
      console.log("提交失败", res)
    }
  }).catch((error)=>{
    console.log("错误：", error)
  })  
}
// 下载word文件
const downloadWord=()=>{
  console.log('下载word啦')
  let params ={
    latex_str: latexText.value  
  }
    axios.post(`/questions/latex_2_word/`, params, {responseType: "blob"}).then((res) => {
      console.log('res:', res)   
      ElMessage.success('请保存好word附件')      
      const url = window.URL.createObjectURL(new Blob([res]));
      const link = document.createElement('a');
      link.href = url;     
      link.setAttribute('download', 'download.docx'); 
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link)   
      }).catch((error)=>{
        console.log("错误：", error)
      })  
}
</script>

<template>
  <div class="drawing-board">
    <h3>请输入数学公式，撤销(Ctrl+Z) / 恢复(Ctrl+Y)</h3>
    <div id="container" ref="container" style="width: 800px; height: 300px"></div>
    <div class="two_button">
      <el-button type="primary" @click="postAlibabaOCR">识别</el-button>
      <el-button type="warning" @click="clearBoard">清空</el-button>
    </div>
    <div v-show="latexVisible">latex公式为：<span style="color: red;font-size: x-large;">{{ latexText }}</span></div>
    <div v-if="latexVisible" style="margin: 10px;" class="downloadWord">
      <span style="font-size: xx-larger; margin: 5px;" id="latexRender">{{ latexRender }}</span>
      <el-button type="warning" @click="downloadWord" size="small">下载word</el-button>
    </div>

  </div>
</template>

<style scoped>
.drawing-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  h3{
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.downloadWord {
  display: flex;
  flex-direction: column;
  margin: 10px;
}
.two_button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
</style>
